<template>
	<uni-popup ref="popup" type="bottom" background-color="transparent" class="share-popup"
		:safe-area="false">
		<view class="popup-content" :style="{'background-image': 'url('+ShareImg.back+')'}">
			<view class="view-title main-space-around">
				<image :src="ShareImg.left" class="left-1"></image>
				<view class="share-text">分享</view>
				<image :src="ShareImg.right" class="left-1"></image>
			</view>
			<view class="view-container">
				<!-- #ifdef MP -->
				<view class="column-center-flex">
					<button plain class="share-btn" type="default" data-name="shareBtn" open-type="share"> 
						<image :src="ShareImg.wechat" class="img-class" mode="aspectFit"></image>
					</button>
					<text class="text-class">微信</text>
				</view>
				<!-- #endif -->
				<view class="column-center-flex">
					<image :src="ShareImg.posters" class="img-class" @click="shareQrCode"></image>
					<text class="text-class special">生成海报</text>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { ShareImg } from '../../utils/objectValue';

	export default {
		data() {
			return {
				ShareImg
			};
		},
		onLoad() {},
		onShow() {},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			shareQrCode() {
				this.$emit('qrcode');
			}
		}
	}
</script>

<style lang="scss" scoped>
.share-popup {
	width: 100%;
	.popup-content {
		width: 100%;
		height: 260px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-size: 100% 100%;
		background-repeat: no-repeat center;
	}
	.view-title {
		width: 100%;
		height: 60px;
	}
	.share-btn{
		border: 0 !important;
	}
	.share-text {
		font-size: 30px;
		font-family: BTH;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 35px;
	}
	.left-1 {
		width: 98px;
		height: 15px;
	}
	.right-1 {
		width: 44px;
		height: 19px;
	}
	.view-container {
		display: flex;
		width: 100%;
		height: calc(100% - 60px);
	}
	.view-container > view {
		width: 100%;

	}
	.img-class {
		width: 60px;
		height: 60px;
	}
	.text-class {
		margin-top: 5px;
		font-size: 16px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 19px;
	}
	.special{
		padding-top: 15px;
	}
	.posters-popup-class{
		width: 100%;
		.content-view{
			width: 100%;
		}
		.posters-content{
			position: relative;
			width: 297px;
			height: 416px;
			background-size: 100% 100%;
			.code-img {
				width: 80px;
				height: 80px;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}
		.uni-share-button-box{
			width: 297px;
			height: 48px;
			background: linear-gradient(270deg, #8F0CF2 0%, #AF3DFC 100%);
			border-radius: 4px 4px 4px 4px;
			opacity: 1;
			font-size: 16px;
			font-family: PingFangHK-Medium-Regular, PingFangHK-Medium;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48px;
			margin-top: 20px;
			margin-bottom: 100%;
			text-align: center;
		}
	}

	.qr-code{
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #1D1F36;
		display: flex;
		justify-content: center;
		align-items: center;
		.container{
			width: 594rpx;
			.img-list{
				width: 594rpx;
				height: 1108rpx;
				margin: 30rpx auto;
				.canvas {
					width: 100%;
					height: 100%;
				}
			}
			.save-share{
				display: flex;
				justify-content: center;
				align-items: center;
				.btn-item{
					position: relative;
					width: 299rpx;
					height: 91rpx;
					image{
						width: 100%;
						height: 100%;
					}
					.text{
						width: 100%;
						height: 90rpx;
						line-height: 90rpx;
						background-color: transparent;
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						z-index: 9;
						font-size: 34rpx;
						font-family: BTH;
						font-weight: 400;
						color: #FFFFFF;
						top: 0;
						left: 0;
					}
				}
			}
		}
	}
}
</style>